// 引入模块
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  // 设置模式  (解决终端警告问题)
  mode: 'production',
  // 修改端口号
  devServer: {port: 5555,},
  // 修改入口文件
  entry: "./src/main.js", // 入口
  // 修改出口文件
  output: { 
      clean:true,  //每次打包前，清空之前打包好的代码
      path: path.join(__dirname, "dist"), // 出口路径
      filename: "bundle.js" // 出口文件名
  },
  // 配置HtmlWebpackPlugin  作用：以某个html文件作为模板生成新的html文件 并把打包好的代码引入
  plugins: [
    // yarn add HtmlWebpackPlugin -D下载包
    new HtmlWebpackPlugin({
      template:'./public/index.html' 
    })
  ],
  module: {
    rules: [
      { //下载"style-loader"和"css-loader" -D 处理css
        test: /\.css$/i,   //定义要处理的文件为css
        // css-loader是为了让webpack能够识别css文件的内容并打包 // style-loader是为了把CSS样式插入到DOM中。
        // 数组中的loader使用顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      { //下载"less"和"less-loader" -D  
        test: /\.less$/i,   //处理less
        // 使用less-loader, 让webpack能解析less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, //处理图片
        type: 'asset'  //把小于8kb的转成64base 大于8kb的原图片输出
      },
      {
        // 处理字体图标
        test: /\.(eot|svg|ttf|woff|woff2)$/,  //字体图标
        type: 'asset/resource', //直接把原文件输出
        generator: {
            // 根据原文件生成的 文件位置和名字
          filename: 'font/[name].[hash:6][ext]'
        }
      },
      {
        // 对高版本js语法做降级处理后打包
        // 下载yarn add babel-loader @babel/core @babel/preset-env -D
        test: /\.js$/,
        exclude: /(node_modules)/,//不包括node_modules里的文件
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
      }
    ]
  }
}
